<template>
  <div class="creator">
    <div class="creator-header">
      <div class="ch-title">LOGO</div>
      <div class="ch-actions">
        <el-button size="mini" type="text" icon="el-icon-d-arrow-left">
          Undo
        </el-button>
        <el-button size="mini" type="text" icon="el-icon-d-arrow-right">
          Redo
        </el-button>
        <el-button size="mini" type="text" icon="el-icon-delete">
          清空
        </el-button>
        <el-button
          size="mini"
          type="text"
          icon="el-icon-download"
          @click="download"
        >
          导出
        </el-button>
        <el-button size="mini" type="text" icon="el-icon-upload2" @click="save">
          保存
        </el-button>
      </div>
    </div>
    <div class="container">
      <lib-list />
      <preview />
      <editor />
      <hotkeyManager />
    </div>
  </div>
</template>

<script>
import LibList from '@/components/lib-list'
import preview from '@/components/preview'
import editor from '@/components/editor'
import hotkeyManager from '@/components/hotkeyManager'

export default {
  components: {
    LibList,
    preview,
    editor,
    hotkeyManager,
  },
  beforeMount() {
    this.$axios.get('/mock.json').then((res) => {
      const { data } = res
      console.log(data, 'initComponent=======')
      this.$store.commit('initComponent', data)
    })
  },
  methods: {
    undo() {},
    redo() {},
    clear() {},
    download() {},
    save() {
      let { components } = this.$store.state
      components = components.map((item) => {
        const { attrs, ...rest } = item
        return rest
      })
      // eslint-disable-next-line no-console
      console.log('save====', JSON.stringify(components))
    },
  },
}
</script>

<style>
.creator {
  height: 100vh;
}
.container {
  margin: 0 auto;
  height: calc(100vh - 40px);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
}
.creator-header {
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 90;
}

.ch-title {
  width: 160px;
  font-size: 20px;
}
</style>
